import { PageContainer } from '@ant-design/pro-layout';
import { Alert, Avatar, DatePicker, Skeleton } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { useAccess, useModel } from 'umi';
import styles from './style.less';
import TrendCard from '../analysis/components/trend/TrendCard';

export default (): React.ReactNode => {
  const access = useAccess();

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const PageHeaderContent: React.FC<{
    currentUser: AccountData.CurrentAccountVo | undefined;
  }> = () => {
    const loading = currentUser && Object.keys(currentUser).length;
    if (!loading) {
      return <Skeleton avatar paragraph={{ rows: 1 }} active />;
    }
    const currentHour = moment().hour();
    let greeting = '';

    if (currentHour >= 0 && currentHour < 12) {
      greeting = '早上好';
    } else if (currentHour >= 12 && currentHour < 18) {
      greeting = '下午好';
    } else {
      greeting = '晚上好';
    }

    return (
      <div className={styles.pageHeaderContent}>
        <div className={styles.avatar}>
          <Avatar size="large" src={currentUser.organizationAvatar} />
        </div>
        <div className={styles.content}>
          <div className={styles.contentTitle}>
            {greeting}！{currentUser?.name}，祝你开心每一天！
          </div>
          <div>
            {currentUser.organizationName} | 上次登录时间：
            {moment(currentUser?.loginTime).format('YYYY-MM-DD hh:mm:ss')}
          </div>
        </div>
      </div>
    );
  };


  return (
    <PageContainer
      title={false}
      header={{
        breadcrumb: {},
      }}
      content={<PageHeaderContent currentUser={currentUser} />}
    >

      {access.数据分析x配置x预览者 ? <TrendCard /> : <img alt="logo" width={'100%'} src="/home_bg.jpg" style={{
        marginTop: "24px"
      }} />}

    </PageContainer>
  );
};
